<template>
  <div class="globalzj grayback">
    <div class="head">
      <div class="headflex">
        <div class="avator"><img :src="form.avatar" alt="" /></div>
        <div class="user">
          <p>{{ form.account }}</p>
        </div>
      </div>
      <div class="guanzhuflex">
        <div class="numfirst">
          <div class="num1">{{ form.collectionNumber }}</div>
          <div class="property">收藏</div>
        </div>
        <div class="numfirst">
          <div class="num1">{{ form.likeNumber }}</div>
          <div class="property">关注</div>
        </div>
        <div class="numfirst">
          <div class="num1">{{ form.score }}</div>
          <div class="property">积分</div>
        </div>
        <div class="numfirst">
          <div class="num1">{{ form.couponNumber }}</div>
          <div class="property">优惠券</div>
        </div>
      </div>
    </div>
    <div class="yaopininfo">
      <div class="yaopintitle">
        <div><h3>药品订单</h3></div>
        <div class="all">全部订单></div>
      </div>
      <div class="yaopininfolist">
        <div class="infolist">
          <div>
            <van-badge :content="form.orderInfo.paidNumber"
              ><img src="../assets/dfk.png" alt=""
            /></van-badge>
          </div>
          <div>待付款</div>
        </div>
        <div class="infolist">
          <div>
            <van-badge :content="form.orderInfo.receivedNumber"
              ><img src="../assets/dfh.png" alt=""
            /></van-badge>
          </div>
          <div>待发货</div>
        </div>
        <div class="infolist">
          <div>
            <van-badge :content="form.orderInfo.shippedNumber"
              ><img src="../assets/dsh.png" alt=""
            /></van-badge>
          </div>
          <div>待收货</div>
        </div>
        <div class="infolist">
          <div>
            <van-badge :content="form.orderInfo.finishedNumber"
              ><img src="../assets/ywc.png" alt=""
            /></van-badge>
          </div>
          <div>已完成</div>
        </div>
      </div>
    </div>
    <div class="yaopininfo">
      <div class="yaopintitle" style="margin-bottom: 15px">
        <div><h3>快捷工具</h3></div>
        <div class="all"></div>
      </div>
      <van-cell title="我的问诊" is-link>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #title>
          <img src="../assets/mywz.png" class="kjicon" alt="" />我的问诊
        </template>
      </van-cell>
       <van-cell title="我的家庭" is-link @click="myfamily">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #title>
          <img src="../assets/myfamily.png" class="kjicon" alt="" />我的家庭
        </template>
      </van-cell>
             <van-cell title="我的地址" is-link>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #title>
          <img src="../assets/myaddress.png" class="kjicon" alt="" />我的地址
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import service from "../request";
export default {
  data() {
    return {
      form: {},
    };
  },
  mounted() {
    // this.form = JSON.parse(window.localStorage.getItem("key"));
    // console.log(this.form);
    this.getdata();
  },
  methods: {
    async getdata() {
      const res = await service.get("/patient/myUser");
      console.log(res);
      this.form = res.data;
    },
    myfamily(){
 this.$router.push({
   path:"/jtda"
 })
    },
  },
};
</script>
<style scoped>
.kjicon {
  width: 20px;
  vertical-align: middle;
  margin-right: 10px;
  height: 20px;
}
.infolist div img {
  width: 28px;
  height: 28px;
}
.infolist div {
  font-size: 14px;
  text-align: center;
}
.infolist {
  width: 25%;
}
.yaopininfolist {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 15px;
  justify-content: space-around;
}
.all {
  color: #c3c3c5;
  font-size: 13px;
  cursor: pointer;
}
.yaopintitle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yaopininfo {
  width: 100%;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  background: #ffff;
  margin-top: 30px;
  border-radius: 10px;
}
.num1 {
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 16px;
}
.property {
  width: 100%;
  text-align: center;
  color: #979797;

  font-size: 12px;
}
.user {
  width: calc(100% - 70px);
  height: auto;
  padding: 0px 0px 0px 10px;
  box-sizing: border-box;
}
.avator img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.avator {
  width: 70px;
  height: 70px;
}
.headflex {
  display: flex;
}
.guanzhuflex {
  width: 100%;
  height: auto;
  display: flex;
  margin-top: 15px;
  justify-content: space-around;
}
.head {
  width: 100%;
  height: auto;
  background: linear-gradient(
    180deg,
    rgba(44, 181, 165, 0.46),
    rgba(44, 181, 165, 0)
  );
  padding: 60px 10px 0px 10px;
  box-sizing: border-box;
}
.grayback {
  padding: 10px;
  box-sizing: border-box;
  background: #f6f7f9;
}
h3 {
  margin: 0px;
}
.numfirst {
  width: 25%;
  height: auto;
}
</style>